<template>
	<view>
		<view>
		    <view class="wearper">
		        <view class="itemdv">
		            <view class="lable">收货地址:</view>
		            <view class="inputdv">
		                <picker mode="region"  @change="bindRegionChange"  >
		                    <view class="picker" >
		                        <view v-if="region.length > 0 " class="addtxt">{{region[0]}},{{region[1]}},{{region[2]}}</view>
		                        <view class="pdd"  v-else>
		                            <view>请选择省市区</view>
		                            <view style="float: right;">
		                                <image class="rightdv" src="https://myr.wissun.net/static/newhome/img/iconleft.png"></image>
		                            </view>
		                        </view>
		                    </view>
		                </picker>
		            </view>
		        </view>
		        <view class="itemdv">
		            <view class="lable">详细地址:</view>
		            <view class="inputdv">
		                <input type="text"  v-model="address"  placeholder="请填写楼栋号门牌号"/>
		            </view>
		        </view>
		        <view class="itemdv">
		            <view class="lable">联系人:</view>
		            <view class="inputdv">
		                <input type="text"  v-model="username"  placeholder="请填写收货人姓名"/>
		            </view>
		        </view>
		        <view class="itemdv">
		            <view class="lable">手机号:</view>
		            <view class="inputdv">
		                <input type="number" v-model="phone"  maxlength="11" placeholder="请填写收货人联系方式"/>
		            </view>
		        </view>
		    </view>
		    <view class="tjbtn">
		        <view class="btnbaoc" @click="saveaddress">保存地址</view>
		    </view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				address:"",
				username:"",
				phone:"",
				region: []
			}
		},
		 onLoad(p) {
			if(p.id){
				uni.setNavigationBarTitle({title:"编辑地址"})
				var postdata={}
				var _t=this;
				postdata.id=p.id
				postdata.user_id=uni.getStorageSync("user_id")
				this.request("/api/address/get_address_byone", postdata,"post").then(ret => {
					var info=ret.info
					_t.id=p.id
					_t.address=info.detail
					_t.username=info.rec_user_name
					_t.phone=info.rec_mobile
					_t.region=[info.ad1,info.ad2,info.ad3]
				})
			}
		},
		methods: {
			bindRegionChange(e){
				this.region=e.detail.value
			},
			saveaddress() {
				var postdata={}
				var region=this.region
				if(region.length == 0 ){
					uni.showToast({
					  title: '请选择收货地址',
					  icon:"none"
					})
					return 
				}
				postdata.ad1=region[0];
				postdata.ad2=region[1];
				postdata.ad3=region[2];
				if(this.address == "" ){
					wx.showToast({
					  title: '请输入详细地址',
					  icon:"none"
					})
					return 
				}
				postdata.detail=this.address;
				postdata.openid=wx.getStorageSync('openid')
				if(this.username == "" ){
					wx.showToast({
					  title: '请输入联系人',
					  icon:"none"
					})
					return 
				}
				postdata.rec_user_name=this.username;
				postdata.user_id=uni.getStorageSync("user_id")
				if(this.phone == "" ){
					wx.showToast({
					  title: '请输入手机号',
					  icon:"none"
					})
					return
				}
				postdata.rec_mobile=this.phone;
				var url="/api/address/create_address";
				if(this.id){
					postdata.address_id=this.id;
					url="/api/address/update_address";
				}
				this.request(url, postdata,"post").then(ret => {
					uni.showToast({
						title: ret.info,
						icon:"success"
					})
					setTimeout(function(){
						uni.navigateBack({delta: 1})
					},1500)
					
				})
				
				
			},
		}
	}
</script>

<style>
.wearper{
    width: calc(100% - 40px);
    margin:0 auto;
    margin-top: 20px;
}
.lable{
    font-size: 15px;
    width: 80px;
    text-align: left;
    color: #343434;
}
.rightdv{
    width: 30px;
    height: 30px;
    padding-top: 11px;
    float: right;
}
.itemdv{
    display: flex;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #eee;
}
.inputdv{
    font-size: 15px;
    width: calc(100% - 90px);
}
.inputdv input{
    height: 50px;
    line-height: 50px;
}
.addtxt{}
.pdd{ 
    color: #808080;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    width: 100%;
}
.btnbaoc{
    width: 200px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin:20px auto;
    background-color: #0DB8C0;
    color: #fff;
    border-radius: 20px;
}
.tjbtn{
    position:fixed;
    width: 100%;
    bottom: 60px;
}
</style>
